import React, { useState } from 'react'
import { Tabs, SideBar } from 'antd-mobile'
import classnames from 'classnames'
import {Link} from 'react-router-dom'
import LazyLoad from 'react-lazyload'
import DefaultImg from '@/assets/images/default.png'
import { Wrapper } from './style'

interface MainProps{
    cities:any[]
}

const Main:React.FC<MainProps>=(props)=> {
    const { cities } = props
    const [activeKey, setActiveKey] = useState('key1')
    const tabs1 = [
        {
            key: 'key1',
            title: '推荐',
        },
        {
            key: 'key2',
            title: '热门',
        },
        {
            key: 'key3',
            title: '四川',
        },
        {
            key: 'key4',
            title: '浙江',
        },
        {
            key: 'key5',
            title: '湖南',
        },
        {
            key: 'key6',
            title: '江西',
        },
        {
            key: 'key7',
            title: '福建',
        },
    ]
    
    const all = cities.filter(item => item.tag == 'pc')
    const hot = cities.filter(item => item.classify == '热门')
    const sichuan = cities.filter(item => item.classify == '四川')
    const zhejiang = cities.filter(item => item.classify == '浙江')
    const hunan = cities.filter(item => item.classify == '湖南')
    const jiangxi = cities.filter(item => item.classify == '江西')
    const fujian = cities.filter(item => item.classify == '福建')
    const renderTabs = () => {
        return (
            <Wrapper>
                <div className="container">
                    <div className="side">
                        <SideBar activeKey={activeKey} onChange={setActiveKey}
                            style={{ '--width': '65px', '--background-color': '#fff' }}>
                            {
                                tabs1.map(item => (
                                    <SideBar.Item key={item.key}
                                        title={<span style={{ fontSize: "0.7rem" }}>{item.title}</span>
                                        } />
                                ))
                            }
                        </SideBar>
                    </div>
                    <div className="main">
                        <div className='gamelist'>
                            <div className={classnames(
                                { content: true },
                                activeKey === 'key1' && { active: activeKey === 'key1' }
                            )}
                            >
                                {all.map(item => {
                                    return (
                                        <Link
                                            className="city_name"
                                            to={{
                                                pathname:'/home/local',
                                                search:`name=${item.city}`// query.select search
                                            }} 
                                            key={item.id + Math.random() * 10}>
                                            <li className='game-list' 
                                            >
                                                <LazyLoad 
                                                    placeholder={<img className='img' 
                                                    src={DefaultImg}
                                                    />}>
                                                        <img src={item.img} alt="" key={item.id} />
                                                </LazyLoad>
                                                <span key={item.id + Math.random() * 10}>{item.city}</span>
                                            </li>
                                        </Link>
                                        
                                    )
                                })}
                            </div>
                            <div className={classnames(
                                { content: true },
                                activeKey === 'key2' && { active: activeKey === 'key2' }
                            )}
                            >
                                {hot.map(item => {
                                    return (
                                        <Link
                                            className="city_name"
                                            to={{
                                                pathname:'/home/local',
                                                search:`name=${item.city}`// query.select search
                                            }} 
                                            key={item.id + Math.random() * 10}>
                                            <li className='game-list' 
                                            >
                                                <LazyLoad 
                                                    placeholder={<img className='img' 
                                                    src={DefaultImg}
                                                    />}>
                                                        <img src={item.img} alt="" key={item.id} />
                                                    </LazyLoad>
                                                <span key={item.id + Math.random() * 10}>{item.city}</span>
                                            </li>
                                        </Link>
                                    )
                                })}

                            </div>
                            <div className={classnames(
                                { content: true },
                                activeKey === 'key3' && { active: activeKey === 'key3' }
                            )}
                            >
                                {sichuan.map(item => {
                                    return (
                                        <Link
                                            className="city_name"
                                            to={{
                                                pathname:'/home/local',
                                                search:`name=${item.city}`// query.select search
                                            }} 
                                            key={item.id + Math.random() * 10}>
                                            <li className='game-list' 
                                            >
                                                <LazyLoad 
                                                    placeholder={<img className='img' 
                                                    src={DefaultImg}
                                                    />}>
                                                        <img src={item.img} alt="" key={item.id} />
                                                </LazyLoad>
                                                <span key={item.id + Math.random() * 10}>{item.city}</span>
                                            </li>
                                        </Link>
                                    )
                                })}
                            </div>
                            <div className={classnames(
                                { content: true },
                                activeKey === 'key4' && { active: activeKey === 'key4' }
                            )}
                            >
                                {zhejiang.map(item => {
                                    return (
                                        <Link
                                            className="city_name"
                                            to={{
                                                pathname:'/home/local',
                                                search:`name=${item.city}`// query.select search
                                            }} 
                                            key={item.id + Math.random() * 10}>
                                            <li className='game-list' 
                                            >
                                                <LazyLoad 
                                                    placeholder={<img className='img' 
                                                    src={DefaultImg}
                                                    />}>
                                                        <img src={item.img} alt="" key={item.id} />
                                                </LazyLoad>
                                                <span key={item.id + Math.random() * 10}>{item.city}</span>
                                            </li>
                                        </Link>
                                    )
                                })}
                            </div>
                            <div className={classnames(
                                { content: true },
                                activeKey === 'key5' && { active: activeKey === 'key5' }
                            )}
                            >
                                {hunan.map(item => {
                                    return (
                                        <Link
                                            className="city_name"
                                            to={{
                                                pathname:'/home/local',
                                                search:`name=${item.city}`// query.select search
                                            }} 
                                            key={item.id + Math.random() * 10}>
                                            <li className='game-list' 
                                            >
                                                <LazyLoad 
                                                    placeholder={<img className='img' 
                                                    src={DefaultImg}
                                                    />}>
                                                        <img src={item.img} alt="" key={item.id} />
                                                </LazyLoad>
                                                <span key={item.id + Math.random() * 10}>{item.city}</span>
                                            </li>
                                        </Link>
                                    )
                                })}
                            </div>
                            <div className={classnames(
                                { content: true },
                                activeKey === 'key6' && { active: activeKey === 'key6' }
                            )}
                            >
                                {jiangxi.map(item => {
                                    return (
                                        <Link
                                            className="city_name"
                                            to={{
                                                pathname:'/home/local',
                                                search:`name=${item.city}`// query.select search
                                            }} 
                                            key={item.id + Math.random() * 10}>
                                            <li className='game-list' 
                                            >
                                                <LazyLoad 
                                                    placeholder={<img className='img' 
                                                    src={DefaultImg}
                                                    />}>
                                                        <img src={item.img} alt="" key={item.id} />
                                                </LazyLoad>
                                                <span key={item.id + Math.random() * 10}>{item.city}</span>
                                            </li>
                                        </Link>
                                    )
                                })}
                            </div>
                            <div className={classnames(
                                { content: true },
                                activeKey === 'key7' && { active: activeKey === 'key7' }
                            )}
                            >
                                {fujian.map(item => {
                                    return (
                                        <Link
                                            className="city_name"
                                            to={{
                                                pathname:'/home/local',
                                                search:`name=${item.city}`// query.select search
                                            }} 
                                            key={item.id + Math.random() * 10}>
                                            {/* {nm} */}
                                            <li className='game-list' 
                                            >
                                                <LazyLoad 
                                                    placeholder={<img className='img' 
                                                    src={DefaultImg}
                                                    />}>
                                                        <img src={item.img} alt="" key={item.id} />
                                                </LazyLoad>
                                                <span key={item.id + Math.random() * 10}>{item.city}</span>
                                            </li>
                                        </Link>
                                    )
                                })}
                            </div>
                        </div>
                    </div>
                </div>
            </Wrapper>
        )
    }

    return (
        <div>
            <Tabs>
                <Tabs.Tab title='' key='key1'>
                    {
                        renderTabs()
                    }
                </Tabs.Tab>
            </Tabs>
        </div>
    )
}

export default Main